{% extends 'base.html' %}

{% block content %}

<h1>display: flex  布局(One-dimensional space)</h1>
<a href="https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/?shrink=1#flex-flow"  target="_blank">原文：写给自己看的display: flex布局教程 « 张鑫旭-鑫空间-鑫生活</a>
<dl>
    <dt>block and inline</dt>
        <dd>div这类块状元素元素设置display:flex</dd>
        <dd>span这类内联元素设置display:inline-flex</dd>
    <dt>flex布局即创建</dt>
        <dd>display: flex或者display:inline-flex的元素称为flex容器</dd>
        <dd>里面的子元素称为flex子项</dd>
</dl>

<table border="1" width="100%" class="params_table" cellspacing="1" style="max-width:400px;">
    <thead>
        <tr>
            <th>作用在flex容器上</th>
            <th>作用在flex子项上</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <ul>
                    <li><a href="#flex-direction" title="控制所有子项整体布局方向，是从左往右还是从右往左之类">flex-direction</a></li>
                    <li><a href="#flex-wrap" title="控制所有子项是否换行等布局表现">flex-wrap</a></li>
                    <li><a href="#flex-flow" title="是flex-direction和flex-wrap的缩写">flex-flow</a></li>
                    <li><a href="#justify-content" title="控制所有子项水平对齐方式，类似两端对齐还是居中对齐">justify-content</a></li>
                    <li><a href="#align-items" title="控制所有子项的垂直对齐方式，例如顶对齐还是底对齐">align-items</a></li>
                    <li><a href="#align-content" title="当子项超过一行且副轴方向有剩余空间时，控制整体的垂直分布方式，例如等分或者拉伸等">align-content</a></li>
                </ul>
            </td>
            <td>
                <ul>
                    <li><a href="#flex-order" title="可以控制单个子项的所在的位置">order</a></li>
                    <li><a href="#flex-grow" title="控制单个子项占据空间比例">flex-grow</a></li>
                    <li><a href="#flex-shrink" title="空间不足时候子项缩小的比例">flex-shrink</a></li>
                    <li><a href="#flex-basis" title="定义子项占据的宽度">flex-basis</a></li>
                    <li><a href="#flex-flex" title="是flex-grow，flex-shrink和flex-basis的缩写">flex</a></li>
                    <li><a href="#align-self" title="定义子项的垂直对齐方式">align-self</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
          <td colspan="2">
              <dl>
                  <dt></dt>
                  <dd>无论作用在flex容器上，还是作用在flex子项，
                    都是控制的flex子项的呈现，只是前者控制的是整体，
                    后者控制的是个体</dd>
                  <dd>Flex布局中还有主轴(justify-*)和交叉轴(align-*)的概念</dd>
                  <dd>在Flex布局中，flex子元素的设置float，clear以及vertical-align属性都是没有用的。</dd>
                  <dd><b>Flexbox布局</b>最适合应用程序的组件和小规模布局（一维布局）</dd>
                  <dd>而<b>Grid布局</b>则适用于更大规模的布局（二维布局）</dd>
              </dl>
            </td>
        </tr>
      </tfoot>
</table>
<pre class="language-html line-numbers">
    <code>
container(flex容器)
  div(flex子项) > img
  div(flex子项) > img
  div(flex子项) > img
    </code>
</pre>

<h2>作用在flex容器上的CSS属性</h2>

<div class="flex">
    <div class="check-group">
        <dt>flex-direction</dt>
        <dd>
            <input type="radio" id="flex-direction-row" name="flex-direction" value="row" checked="checked">
            <label for="flex-direction-row">row</label>
            <input type="radio" id="flex-direction-row-reverse" name="flex-direction" value="row-reverse">
            <label for="flex-direction-row-reverse">row-reverse</label>
            <input type="radio" id="flex-direction-column" name="flex-direction" value="column">
            <label for="flex-direction-column">column</label>
            <input type="radio" id="flex-direction-column-reverse" name="flex-direction" value="column-reverse">
            <label for="flex-direction-column-reverse">column-reverse</label>
        </dd>
        <dt>flex-wrap</dt>
        <dd>
            <input type="radio" id="flex-wrap-nowrap" name="flex-wrap" value="nowrap" checked="checked">
            <label for="flex-wrap-nowrap">nowrap</label>
            <input type="radio" id="flex-wrap-wrap" name="flex-wrap" value="wrap">
            <label for="flex-wrap-wrap">wrap</label>
            <input type="radio" id="flex-wrap-reverse" name="flex-wrap" value="wrap-reverse">
            <label for="flex-wrap-reverse">wrap-reverse</label>
        </dd>
        <dt>justify-content</dt>
        <dd>
            <input type="radio" id="justify-content-flex-start" name="justify-content" value="flex-start" checked="checked">
            <label for="justify-content-flex-start">flex-start</label>
            <input type="radio" id="justify-content-flex-end" name="justify-content" value="flex-end">
            <label for="justify-content-flex-end">flex-end</label>
            <input type="radio" id="justify-content-center" name="justify-content" value="center">
            <label for="justify-content-center">center</label>
            <input type="radio" id="justify-content-space-between" name="justify-content" value="space-between">
            <label for="justify-content-flex-start">space-between</label>
            <input type="radio" id="justify-content-space-around" name="justify-content" value="space-around">
            <label for="justify-content-space-around">space-around</label>
            <input type="radio" id="justify-content-space-evenly" name="justify-content" value="centerspace-evenly">
            <label for="justify-content-space-evenly">space-evenly</label>
        </dd>
        <dt>align-items</dt>
        <dd>align-items中的items指的就是flex子项们</dd>
        <dd>
            <input type="radio" id="align-items-stretch" name="align-items" value="stretch" checked="checked">
            <label for="align-items-stretch">stretch</label>
            <input type="radio" id="align-items-flex-start" name="align-items" value="flex-start">
            <label for="align-items-flex-start">flex-start</label>
            <input type="radio" id="align-items-center" name="align-items" value="center">
            <label for="align-items-center">center</label>
            <input type="radio" id="align-items-flex-end" name="align-items" value="flex-end">
            <label for="align-items-flex-end">flex-end</label>
            <input type="radio" id="align-items-baseline" name="align-items" value="baseline">
            <label for="align-items-baseline">baseline</label>
        </dd>
        <dt>align-content</dt>
        <dd>align-content则是指明垂直方向每一行flex元素的对齐和分布方式。
            如果所有flex子项只有一行，则align-content属性是没有任何效果的。</dd>
        <dd>
            <input type="radio" id="align-content-stretch" name="align-content" value="stretch" checked="checked">
            <label for="align-content-stretch">stretch</label>
            <input type="radio" id="align-content-flex-start" name="align-content" value="flex-start">
            <label for="align-content-flex-start">flex-start</label>
            <input type="radio" id="align-content-center" name="align-content" value="center">
            <label for="align-content-center">center</label>
            <input type="radio" id="align-content-flex-end" name="align-content" value="flex-end">
            <label for="align-content-flex-end">flex-end</label>
            <input type="radio" id="align-content-baseline" name="align-content" value="baseline">
            <label for="align-content-baseline">baseline</label>
        </dd>
    </div>
    <div class="flex-box">
        <div class='flex-item'>1</div>
        <div class='flex-item'>2</div>
        <div class='flex-item'>3</div>
        <div class='flex-item'>4</div>
        <div class='flex-item'>5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>
    </div>
    <div class="attribute">
        <dl>
            <dt>stretch</dt>
            <dd>默认值。flex子项拉伸。在演示中我们可以看到白蓝径向渐变背景区域是上下贯穿flex容器的，就是因为flex子项的高度拉伸到容器高度导致。</dd>
            <dd>如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸。</dd>
            <dt>flex-start</dt>
            <dd>逻辑CSS属性值，与文档流方向相关。默认表现为容器顶部对齐。</dd>
            <dt>flex-end</dt>
            <dd>逻辑CSS属性值，与文档流方向相关。默认表现为容器底部对齐</dd>
            <dt>center</dt>
            <dd>表现为垂直居中对齐</dd>
            <dt>baseline</dt>
            <dd>表现为所有flex子项都相对于flex容器的基线（字母x的下边缘）对齐</dd>
        </dl>
        </div>
</div>

<div class="flex-items">
    <div class="check-group">
        <dl>
            <dt>order</dt>
            <dd>order改变某一个flex子项的排序位置</dd>
            <dd>
                <input type="radio" id="item-order--1" name="order" value="-1">
                <label for="item-order-1-1">order:-1</label>
                <input type="radio" id="item-order-0" name="order" value="0" checked="checked">
                <label for="item-order-0">order:0</label>
                <input type="radio" id="item-order-1" name="order" value="1">
                <label for="item-order-1">order:1</label>
            </dd>
            <dt>flex-grow</dt>
            <dd>扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙</dd>
            <dd>如果flex-grow值小于1，则扩展的空间就总剩余空间和这个比例的计算值。</dd>
            <dd>如果flex-grow值大于1，则独享所有剩余空间</dd>
            <dd>
                <input type="radio" id="flex-grow-0" name="flex-grow" value="0"  checked="checked">
                <label for="flex-grow-0">flex-grow:0</label>
                <input type="radio" id="flex-grow-0.5" name="flex-grow" value="0.5">
                <label for="flex-grow-0.5">flex-grow:0.5</label>
                <input type="radio" id="flex-grow-1" name="flex-grow" value="1">
                <label for="flex-grow-1">flex-grow:1</label>
                <input type="radio" id="flex-grow-2" name="flex-grow" value="2">
                <label for="flex-grow-2">flex-grow:2</label>
            </dd>
            <dt>flex-shrink</dt>
            <dd>flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例</dd>
            <dd>flex-shrink不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。</dd>
            <dd>如果设置为0，则表示不收缩，保持原始的fit-content宽度</dd>
            <ul>
                <li>如果只有一个flex子项设置</li>
                <dd>flex-shrink值小于1，则收缩的尺寸不完全，会有一部分内容溢出flex容器</dd>
                <dd>flex-shrink值大于等于1，则收缩完全，正好填满flex容器</dd>
                <li>如果多个flex子项设置了flex-shrink</li>
                <dd>flex-shrink值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值</dd>
                <dd>flex-shrink值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和flex-shrink值的比例一样。下面案例演示的就是此场景</dd>
            </ul>
            <dd>
                <input type="radio" id="flex-shrink-0" name="flex-shrink" value="0">
                <label for="flex-shrink-0">flex-shrink:0</label>
                <input type="radio" id="flex-shrink-0.5" name="flex-shrink" value="0.5">
                <label for="flex-shrink-0.5">flex-shrink:0.5</label>
                <input type="radio" id="flex-shrink-1" name="flex-shrink" value="1" checked="checked">
                <label for="flex-shrink-1">flex-shrink:1</label>
                <input type="radio" id="flex-shrink-2" name="flex-shrink" value="2">
                <label for="flex-shrink-2">flex-shrink:2</label>
            </dd>
            <dt>flex-basis</dt>
            <dd>flex-basis定义了在分配剩余空间之前元素的默认大小。</dd>
            <dd>相当于对浏览器提前告知：浏览器兄，我要占据这么大的空间，提前帮我预留好。</dd>
            <dd>如果同时设置width和flex-basis，就渲染表现来看，会忽略width。</dd>
            <dd>flex顾名思义就是弹性的意思，因此，实际上不建议对flex子项使用width属性，因为不够弹性</dd>
            <dd>
                <input type="radio" id="flex-basis-64px" name="flex-basis" value="64px"  checked="checked">
                <label for="flex-basis-64px">flex-basis:64px</label>
                <input type="radio" id="flex-basis-96px" name="flex-basis" value="96px">
                <label for="flex-basis-96px">flex-basis:96px</label>
                <input type="radio" id="flex-basis-128px" name="flex-basis" value="128px">
                <label for="flex-basis-128px">flex-basis:128px</label>
                <input type="radio" id="flex-basis-256px" name="flex-basis" value="256px">
                <label for="flex-basis-256px">flex-basis:256px</label>
            </dd>
            <dt>flex</dt>
            <dd>flex属性是flex-grow，flex-shrink和flex-basis的缩写</dd>
            <dd>flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]</dd>
            <dd>其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。</dd>
            <dd>flex默认值等同于flex:0 1 auto</dd>
            <dd>flex:none等同于flex:0 0 auto；</dd>
            <dd>flex:auto等同于flex:1 1 auto；</dd>
            <dd>
            </dd>
            <dt>align-self</dt>
            <dd>align-self指控制单独某一个flex子项的垂直对齐方式</dd>
            <dd>align-self: auto | flex-start | flex-end | center | baseline | stretch;</dd>
            <dd>
                <input type="radio" id="align-selfauto" name="align-self" value="auto"  checked="checked">
                <label for="align-selfauto">auto</label>
                <input type="radio" id="align-self-flex-start" name="align-self" value="flex-start">
                <label for="align-self-flex-start">flex-start</label>
                <input type="radio" id="align-self-flex-end" name="align-self" value="flex-end">
                <label for="align-self-flex-end">flex-end</label>
                <input type="radio" id="align-self-center" name="align-self" value="center">
                <label for="align-self-center">center</label>
                <input type="radio" id="align-self-baseline" name="align-self" value="baseline">
                <label for="align-self-baseline">baseline</label>
                <input type="radio" id="align-self-stretch" name="align-self" value="stretch">
                <label for="align-self-stretch">stretch</label>
            </dd>
        </dl>
    </div>
</div>











{% endblock content %}

